<!-- 历史报表 -->
<template>
    <div>
      <el-row style="background: #fff; padding: 16px 16px 0;">
        <div class=" topSubmitBtn">
            <!-- <el-button class="btn" type="primary" @click="add()" >添加报表</el-button> -->
            <el-date-picker size="small" style="float:right" v-model="Time" clearable @change="timeChange" value-format="yyyy-MM-dd HH:mm:ss" format="yyyy-MM-dd HH:mm:ss" type="datetimerange" start-placeholder="开始日期" end-placeholder="结束日期" :default-time="['12:00:00']"></el-date-picker>
        </div>
        <div>
          <el-table border :data="tableData" style="width: 100%; margin: 15px 0">
              <el-table-column type="index" width="50" label="序号"></el-table-column>
              <el-table-column prop="TransTime" width="180" label="生成时间" align="left"></el-table-column>
              <el-table-column prop="Title" width="360" label="时间范围" align="left">
                <template slot-scope="scope">
                  {{ scope.row.StartTime }}  -  {{ scope.row.EndTime }}
                </template>
              </el-table-column>
              <el-table-column prop="AttachType" label="报表类型" align="left"></el-table-column>
              <el-table-column prop="Title" label="报表标题" align="left"></el-table-column>
              <el-table-column width="100" label="操作">
                <template slot-scope="scope">
                    <el-button size="mini" type="primary" @click="dialogClick(scope.row)" title="下载" icon="el-icon-download" circle></el-button>
                    <el-button size="mini"  @click="handleDelete(scope.row)" title="删除" type="danger" icon="el-icon-delete" circle></el-button>
                </template>
            </el-table-column>
          </el-table>
          <el-pagination 
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange" 
            :current-page='pageNum'
            :page-size='pageSize'
            background 
            layout="total, prev, pager, sizes, next, jumper"
            :total="total">
          </el-pagination>
        </div>
      </el-row>
    </div>
</template>
  
<script>
  import { connrequest } from "@/api/firstPage";
  import { treeing, getTreeData, parseTime } from "@/utils/index.js";
  import elDragDialog from '@/directive/el-drag-dialog' // base on element-ui
  export default {
    directives: { elDragDialog },
    data() {
      return {
        dialogVisible: false,
        options:[],
        tableData: [],
        Time:[],
        rules:{
          departName: [
            // { required: true, message: '部门名称不能为空' }
          ]
        },
        pageNum: 1,
        pageSize: 10,
        total: 0
      };
    },
    //生命周期 - 创建完成（访问当前this实例）
    created() {
      this.getData()
    },
    //生命周期 - 挂载完成（访问DOM元素）
    mounted() {},
    methods: {
        async getData(){
            const data = {
                Paging: {
                QueryPageNo: this.pageNum,
                QueryPageLength: this.pageSize
                },
                Filter:{
                StartTime:this.Time[0],
                EndTime:this.Time[1]
                }
            }
            const res = await connrequest('GetAutoReportLog',data)
            this.tableData = res.Data
            this.tableData.map(item=>{
                item.TransTime = parseTime(item.TransTime)
                item.EndTime = parseTime(item.EndTime)
                item.StartTime = parseTime(item.StartTime)
            })
            this.total = res.Paging.TotalCount
        },
        timeChange(val){
            if (!val) {
                this.Time = []
                this.getData()
            }else{
                this.getData()
            }
        },

      dialogClick(row){
        this.$message.info('该功能还在开发中')
        return
      },
      // 级联选项卡点击关闭下拉
      elCascaderOnlick(){
        let that = this;
        setTimeout(function() {
          document.querySelectorAll(".el-cascader-node__label").forEach((el) => {
            el.onclick = function() {
              this.previousElementSibling.click();
              that.$refs.cascaderAddr.dropDownVisible = false;
            };
          });
        }, 100);
      },
      handleChange(item){
        if(item){
          this.ParentID  = item[item.length - 1]
          this.ParentName = this.$refs['cascaderAddr'].getCheckedNodes()[0].pathLabels[0]
        }
      },
      async submit(){
        this.$refs['departForm'].validate( async(valid) => {
          if(valid){
            if (this.title === '新增报表') {
                this.departForm.Action = 1;
            }else if(this.title === '编辑报表'){
                this.departForm.Action = 2;
            }
            const data = { 
              Data:this.departForm
            }
            const res = await connrequest('EditAutoReportRule', data)
            if(res.Status.StatusCode === 0){
                if (this.title === '新增报表') {
                    this.$message({
                        type: 'success',
                        message: '自动报表添加成功'
                    });
                }else {
                    this.$message({
                        type: 'success',
                        message: '自动报表编辑成功'
                    });
                }
              
              this.getData()
              this.dialogVisible = false
            }
          }
        })
      },
      handleDelete(item){
        this.$message.info('该功能还在开发中')
        return
        this.$confirm('此操作将永久删除该部门, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
            this.departForm.Detail = {...item}
            this.departForm.Action = 3;
            let data = {
                Data:this.departForm
            }
            const res = await connrequest('EditAutoReportRule', data)
            if(res.Status.StatusCode === 0){
                this.$message({
                type: 'success',
                message: '删除成功!'
                });
                this.getData()
                this.dialogVisible = false
            }
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
      },
        handleSizeChange(pageSize){
            this.pageSize = pageSize
            this.pageNum = 1
            this.getData()
        },
        handleCurrentChange( pageNum ){
            this.pageNum = pageNum
            this.getData()
        }
    }
  };
  </script>
  <style scoped lang='scss'>
  /* @import url(); 引入css类 */
  .top {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  </style>
